<template>
    <div class="module-page">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-position="top">
            <el-form-item label="系统日志保留天数（天）" prop="name">
                <el-input-number size="small" v-model="ruleForm.name" :min="1" label="请输入"></el-input-number>
                <p class="tips">只保留近一段时间的系统打印日志，历史日志自动清理，释放磁盘空间。</p>
            </el-form-item>
            <el-form-item label="指标数据保留天数（天）" prop="name">
                <el-input-number size="small" v-model="ruleForm.type" :min="1" label="请输入"></el-input-number>
                <p class="tips">只保留近一段时间的监测数据，历史监测数据自动清理，清理时仅释放数据库的空间而不会彻底释放磁盘空间。</p>
            </el-form-item>
            <el-form-item>
                <el-button @click="resetForm">取消</el-button>
                <el-button type="primary" @click="submitForm">确定</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
  name: 'log',
  data() {
    return {
      ruleForm: {
        name: '',
        type: '',
        desc: '',
        equipment: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入模板名称', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请选择活动区域', trigger: 'change' }
        ],
        desc: [
          { required: false }
        ],
        equipment: [
          { type: 'array', required: true, message: '请至少选择一个设备' }
        ]
      },
      treeData: [{
        label: '全部',
        id: '0',
        children: [{
          label: '接口流量',
          id: '1',
          children: [{
            label: '二级 1-1',
            id: '11',
            children: [{
              label: '三级 1-1-1',
              id: '111'
            }]
          }]
        }, {
          label: '历史流量',
          id: '2',
          children: [{
            label: '二级 2-1',
            id: '21',
            children: [{
              label: '三级 2-1-1',
              id: '211'
            }]
          }, {
            label: '二级 2-2',
            id: '22',
            children: [{
              label: '三级 2-2-1',
              id: '221'
            }]
          }]
        }, {
          label: '分配内存数',
          id: '3',
          children: [{
            label: '二级 3-1',
            id: '31',
            children: [{
              label: '三级 3-1-1',
              id: '311'
            }]
          }, {
            label: '二级 3-2',
            id: '32',
            children: [{
              label: '三级 3-2-1',
              id: '321',
            }]
          }]
        }]
      }]
    }
  },
  methods: {
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm() {
      this.$refs.tree.setCheckedKeys([]);
      this.$refs.ruleForm.resetFields();
      this.ruleForm.equipment = []
    },
    handleCheckChange(a, b) {
      this.ruleForm.equipment = b.checkedKeys
      this.$refs.ruleForm.validateField('equipment')
    }
  },
  computed: {
    expandedKeys() {
      return [this.treeData[0].id]
    }
  }
}
</script>

<style lang="scss" scoped>
    .module-page {
        padding: 27px;
        box-sizing: border-box;
        .tips {
            color: #989898;
        }
    }
</style>